﻿<script lang="ts" setup>
import { getEnumDisplayName } from '@/utils/enum'
import { formatToDateTime } from '@/utils/dateUtil'
import useCol from '@/hooks/system/useCol'
import { approvalStatusOptions } from '@/types/modules/approval-status'

defineProps({
  isItem: { type: Boolean, default: false },
  itemData: Object
})
const { getBindColumn } = useCol()
</script>

<template>
  <div :class="['detail-wrapper', { isChild: isItem }]">
    <a-card class="basic-content">
      <a-descriptions v-bind="getBindColumn">        
        <a-descriptions-item label="最近修改日期">{{
        formatToDateTime(itemData?.lastModifiedDate)
        }}</a-descriptions-item>
        <a-descriptions-item label="审批序号">{{
        itemData?.sort
        }}</a-descriptions-item>
        <a-descriptions-item label="审批人">{{
        itemData?.approver?.name
        }}</a-descriptions-item>
        <a-descriptions-item label="审批备注">{{
        itemData?.remark
        }}</a-descriptions-item>
        <a-descriptions-item label="审批状态">{{        
        getEnumDisplayName(itemData?.status, approvalStatusOptions)
        }}</a-descriptions-item>
        <a-descriptions-item label="创建日期">{{
          formatToDateTime(itemData?.createdDate)
          }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.detail-wrapper {
  :deep(.ant-card-head-title) {
    font-weight: 600;
  }

  .ant-card {
    margin: 24px;

    &.basic-content {
      margin: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  :deep(.ant-descriptions) {
    tbody>tr:last-child td {
      padding-bottom: 0;
    }
  }

  &.isChild {
    padding-bottom: 0;
    background-color: transparent;

    :deep(.ant-card) {
      margin: 0;
      margin-bottom: 24px;

      .ant-card-body {
        padding: 24px 24px 0;
      }
    }

    &:last-child {
      margin-bottom: 24px;
    }
  }
}
</style>
